<template>
  <div class="setting">
    <div class="set-content">
      <el-row class="set-tab">
        <el-col class="set-tab-btns" :span="22">
          <el-button class="set-tab-item"
            :class="tabType=='SHARE'?'is-tab-active':''"
            @click.stop="click2Tab('SHARE')">分享设置</el-button>
          <el-button class="set-tab-item"
            :class="tabType=='MORE'?'is-tab-active':''"
            @click.stop="click2Tab('MORE')">更多功能</el-button>
        </el-col>

        <el-col class="set-tab-close" :span="2">
          <el-icon  @click.stop="click2Close"><close-bold /></el-icon>
        </el-col>
      </el-row>

      <div class="set-box">
        <setting-share v-if="tabType=='SHARE'"></setting-share>
        <setting-more v-if="tabType=='MORE'"></setting-more>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useWebSiteStore } from '@/store/web/site'
import SettingMore from '@/views/child/setting/setting-more.vue'
import SettingShare from '@/views/child/setting/setting-share.vue'

const tabType = ref('SHARE')

const useWebSite = useWebSiteStore()

const emit = defineEmits(['close'])
const click2Close = () => {
  useWebSite.saveSiteDatas()
  emit('close', false)
}
const click2Tab = (type: string) => {
  tabType.value = type
}
</script>

<style lang="scss">
  .setting {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(67, 71, 92, .8);
    z-index: 1002;
  }

  .set-content{
    position: relative;
    width: 910px;
    min-height: 0;
    background: #fff;
    border-radius: 2px;
    overflow: hidden;
  }

  .set-tab{
    position: relative;
    width: 100%;
    height: 53px;
    background: #43475C;
    border-radius: 2px 2px 0px 0px;
    overflow: hidden;

    .set-tab-btns{
      position: relative;
      height: 100%;

      .set-tab-item{
        width: 121px;
        height: 100%;
        font-size: 16px;
        color: #fff;
        background-color: transparent;
        background-image: none;
        margin: 0;
        border: none;
        border-radius: 0;
        transition: background-color .1s ease-in-out;
      }
    }

    .set-tab-close{
      position: relative;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;

      i{
        font-size: 25px;
        color: #fff;
        cursor: pointer;
      }
    }
  }
  .is-tab-active{
    background-color: #127BFF !important;
  }

  .set-box{
    position: relative;
    width: 100%;
    // min-height: 520px;
  }
</style>
